<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login_page</title>
    <link rel="stylesheet" href="../base.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="loginPage/loginPage.css">
</head>

<body>
    <!-- logo1、2宣传 -->
    <div class="header">
        <img src="loginPage/logo1.png" alt="" class="logo1">
        <img src="loginPage/logo2.png" alt="" class="logo2">
    </div>
    <!-- 背景图 + 登录表单 -->
    <div class="login_background">
        <img src="loginPage/backgroundPage.jpeg" alt="">
        <!-- 登录表单 -->
        <form class="login_form" id="login_form">
            <div class="welcome">
                欢迎
            </div>
            <div class="button1">
                <input type="button" value="登录" onclick="TurnToLogin()">
                <input type="button" value="注册" onclick="TurnToRegister()">
            </div>
            <div class="information1">
                <div>
                    <i class="fa fa-user fa-2x"></i>
                    <!-- 用户名 -->
                    <input type="text" placeholder="用户名/手机" id="username">
                </div>
                <div>
                    <i class="fa fa-lock fa-2x"></i>
                    <!-- 密码 -->
                    <input type="text" placeholder="密码" id="key">
                </div>
                <!-- <div>
                    <i class="fa fa-shield fa-2x"></i>
                    <input type="text" placeholder="账号">
                </div> -->
            </div>
            <div class="button2">
                <span class="selectLogin">
                    <input type="radio">下次自动登录
                </span>
                <span class="forgetSecert">
                    <span onclick="TurnToForgtSerect()">忘记密码</span>
                </span>
                <div class="button_login">
                    <input type="button" value="登录" onclick="checkuser()">
                </div>
                <div class="verifyPhonenumber">
                    <a href="#">手机验证码登录></a>
                </div>
            </div>
        </form>


        <!-- 注册表单 -->
        <form class="register_form" id="register_form">
            <div class="welcome">
                欢迎
            </div>
            <div class="button_1">
                <input type="button" value="登录" onclick="TurnToLogin()">
                <input type="button" value="注册" onclick="TurnToRegister()">
            </div>
            <div class="information2">
                <div class="inputs">
                    <input type="text" placeholder="请输入手机号">
                </div>
                <div class="inputs">
                    <input type="text" placeholder="图形验证码">
                </div>
                <div>
                    <input type="text" placeholder="请输入验证码" class="ele_1">
                    <input type="button" value="获取短信验证码" class="ele_2">
                </div>
                <div class="inputs">
                    <input type="password" placeholder="请输入密码（6-20位）">
                </div>
                <div class="inputs">
                    <input type="password" placeholder="请再次输入密码">
                </div>
                <div class="word">
                    种植所在地
                </div>
                <div class="selecter">
                    <select>
                        <option value="">省</option>
                        <option value="北京市">北京市</option>
                        <option value="天津市">天津市</option>
                        <option value="河北省">河北省</option>
                        <option value="山西省">山西省</option>
                        <option value="内蒙古自治区">内蒙古自治区</option>
                        <option value="辽宁省">辽宁省</option>
                        <option value="吉林省">吉林省</option>
                        <option value="黑龙江省">黑龙江省</option>
                        <option value="上海市">上海市</option>
                        <option value="江苏省">江苏省</option>
                        <option value="浙江省">浙江省</option>
                        <option value="安徽省">安徽省</option>
                        <option value="福建省">福建省</option>
                        <option value="江西省">江西省</option>
                        <option value="山东省">山东省</option>
                        <option value="河南省">河南省</option>
                        <option value="湖北省">湖北省</option>
                        <option value="湖南省">湖南省</option>
                        <option value="广东省">广东省</option>
                        <option value="广西壮族自治区">广西壮族自治区</option>
                        <option value="海南省">海南省</option>
                        <option value="重庆市">重庆市</option>
                        <option value="四川省">四川省</option>
                        <option value="贵州省">贵州省</option>
                        <option value="云南省">云南省</option>
                        <option value="西藏自治区">西藏自治区</option>
                        <option value="陕西省">陕西省</option>
                        <option value="甘肃省">甘肃省</option>
                        <option value="青海省">青海省</option>
                        <option value="宁夏回族自治区">宁夏回族自治区</option>
                        <option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
                        <option value="香港特别行政区">香港特别行政区</option>
                        <option value="澳门特别行政区">澳门特别行政区</option>
                        <option value="台湾省">台湾省</option>
                        <option value="其它">其它</option>
                    </select>
                    <select>
                        <option value="">市</option>
                    </select>
                    <select>
                        <option value="">区</option>
                    </select>
                </div>
                <div class="button_login2">
                    <input type="button" value="立即注册">
                </div>
                <div class="servceAgreement">
                    <i class="fa fa-square-o fa-lg"></i>
                    阅读并同意<a href="#">服务协议</a>
                </div>

            </div>

        </form >
    
        <form class="forgetSecert_form" id="forgetSecert_form">
            <div class="welcome">
                欢迎
            </div>
            <div class="button_1">
                <!-- <input type="button" value="登录" onclick="TurnToLogin()"> -->
                <div class="back" onclick="TurnToLogin()">
                    <i class="fa fa-angle-left fa-3x"></i>
                    <span>返回</span>
                </div>
                <div class="findSercet">
                    找回密码
                </div>
            </div>
            <div class="information2">
                <div class="inputs">
                    <input type="text" placeholder="请输入手机号">
                </div>
                <div class="inputs">
                    <input type="text" placeholder="图形验证码">
                </div>
                <div>
                    <input type="text" placeholder="请输入验证码" class="ele_1">
                    <input type="button" value="获取短信验证码" class="ele_2">
                </div>
                <div class="inputs">
                    <input type="password" placeholder="请输入密码（6-20位）">
                </div>
                <div class="inputs">
                    <input type="password" placeholder="请再次输入密码">
                </div>
                <div class="button_login2">
                    <input type="button" value="确认修改">
                </div>
            </div>
        </form>
    </div>

    <script>

        // 登录/注册/忘记密码 页面的跳转
        function TurnToLogin(){
            document.getElementById('login_form').style.display = "block";
            document.getElementById('register_form').style.display = "none";
            document.getElementById('forgetSecert_form').style.display = "none";
        }

        function TurnToRegister(){
            document.getElementById('register_form').style.display = "block";
            document.getElementById('login_form').style.display = "none";
        }

        function TurnToForgtSerect(){
            document.getElementById('forgetSecert_form').style.display = "block";
            document.getElementById('login_form').style.display = "none";
            document.getElementById('register_form').style.display = "none";
        }

        // 检验用户名与密码
        function checkuser(){
            var user_name = document.getElementById("username").value;
            var password = document.getElementById("key").value;
            if(user_name == "12345678912"){
                if(password == "123456"){
                    window.location.href="/hetianyu/homePage/homePage.html";
                }
                return;
            }
        }
        
    </script>
</body>

</html>